<template>
     <!-- 关联知识点-->
     <el-dialog v-model="knowledgeDialogVisible" title="关联知识点"   width="40%" class="rounded-lg">
         <template #header="{ close, titleId, titleClass }">
          <div class="my-header">
            <span :id="titleId" :class="titleClass">
              关联知识点
            </span>    
          </div>
        </template>
      <div class="flex border-t border-b border-gray-200 min-h-[300px] overflow-y-auto">
        <!-- 添加知识点 -->
        <div class="py-4 w-[70%]">
          <div class="flex justify-between right-div pr-4">
            <el-button link  type="primary"  @click="addNewKnowledge">添加知识点</el-button>
            <div class="relative">
              <el-input v-model="searchKnowledge" placeholder="搜索" class="w-40" size="small" />
              <el-icon class="z-10 text-gray-400 absolute right-[10px] top-[8px] text-sm"><Search /></el-icon>
            </div>
          </div>
           <ul>
              <li v-for="item in knowledgeList" :key="item.id" class="p-2 flex items-center justify-between cursor-pointer hover:bg-blue-50" 
              @mouseenter="item.showActions = true"
              @mouseleave="item.showActions = false">
                <span  v-if="!item.isEditing">{{item.name}}</span>
                <div v-if="item.isEditing" class="flex items-center space-x-2 pr-2">
                  <el-input v-model="item.editingName" class="w-[100px] "  @keyup.enter="confirmRename(row)" />
                  <div class="flex gap-2 ">
                    <el-icon class="cursor-pointer text-blue-500" @click="confirmRename(item)">
                      <Check />
                    </el-icon>
                    <el-icon class="cursor-pointer text-gray-400" @click="cancelRename(item)">
                      <Close />
                    </el-icon>
                  </div>
                </div> 
                <div class="flex items-center space-x-2 pr-2">
                  <el-button link type="info" class=""  @click="startRename(item)"  v-show="item.showActions" >编辑</el-button>
                  <el-button link type="info" class="" @click="deleteKnowledge(item)"  v-show="item.showActions">删除</el-button>
                  <el-checkbox v-model="item.isChecked" ></el-checkbox>
                </div>
              </li>
            </ul>
        </div>
        <!--已选知识点  -->
        <div class="p-4  border-l w-[300px]">
          <span class="text-gray-400">已选 {{ selectedKnowledges.length }}个</span>
           <div class="flex flex-wrap space-x-2">
              <div class="mt-4 border border-dashed border-blue-200 p-2 h-10 text-center " v-for="item in selectedKnowledges" :key="item.id">
                <span class="text-gray-400">{{ item.name }}</span>
              </div>
            </div>
        </div>
      </div>  
        
      <template #footer>
          <div class="px-6 flex items-center justify-between">
          <el-checkbox v-model="isSyncQuestion" label="同步修改引用此题目的作业和考试" size="large" />
            <div class="flex gap-4">
              <el-button @click="knowledgeDialogVisible=false" round class="w-20"> 取消 </el-button>
              <el-button type="primary" @click="addKnowledgeToQuestion" round class="w-20"> 确定 </el-button>
            </div>
          </div>
        </template>

    </el-dialog>
    <!-- 关联标签-->
    <el-dialog v-model="addTagDialogVisible"   width="40%" class="rounded-lg">
         <template #header="{ close, titleId, titleClass }">
          <div class="my-header">
            <span :id="titleId" :class="titleClass">
              添加标签
            </span>    
          </div>
        </template>
        <div class="flex border-t border-b border-gray-200 min-h-[300px] overflow-y-auto"> 
          <!-- 标签的展示和添加区域 -->
          <div class="py-4 w-[70%]">
            <el-button link  type="primary" class="text-base" @click="addNewTag">添加标签</el-button>
            <ul>
              <li v-for="item in tagList" :key="item.id" class="p-2 flex items-center justify-between cursor-pointer hover:bg-blue-50" 
              @mouseenter="item.showActions = true"
              @mouseleave="item.showActions = false">
                <span v-if="!item.isEditing">{{item.name}}</span>
                <div v-if="item.isEditing" class="flex items-center space-x-2 pr-2">
                  <el-input v-model="item.editingName" class="w-[100px] "  @keyup.enter="confirmRename(row)" />
                  <div class="flex gap-2 ">
                    <el-icon class="cursor-pointer text-blue-500" @click="confirmRename(item)">
                      <Check />
                    </el-icon>
                    <el-icon class="cursor-pointer text-gray-400" @click="cancelRename(item)">
                      <Close />
                    </el-icon>
                  </div>
                </div> 
                <div class="flex items-center space-x-2 pr-2">
                  <el-button link type="info" class=""  @click="startRename(item)"  v-show="item.showActions" >编辑</el-button>
                  <el-button link type="info" class="" @click="deleteTag(item)"  v-show="item.showActions">删除</el-button>
                  <el-checkbox v-model="item.isChecked" ></el-checkbox>
                </div>
              </li>

            </ul>
          </div>
          <!-- 关联到的标签区域 -->
          <div class="p-4  border-l  w-[300px]">
            <span class="text-gray-400">已选 {{ selectedTags.length }}个</span>
            <div class="flex flex-wrap space-x-2">
              <div class="mt-4 border border-dashed border-blue-200 p-2 h-10 text-center " v-for="item in selectedTags" :key="item.id">
                <span class="text-gray-400">{{ item.name }}</span>
              </div>
            </div>
          </div>

        </div>
          
        <template #footer>
            <div class="py-4 px-6  flex items-center justify-end">
              <div class="flex gap-4">
                <el-button @click="addTagDialogVisible=false" round class="w-20"> 取消 </el-button>
                <el-button type="primary" @click="addTagToQuestion" round class="w-20"> 确定 </el-button>
              </div>
            </div>
          </template>

    </el-dialog>
</template>

<script setup>
import { ref ,computed,toRefs} from 'vue'
const props =  defineProps({
  showTagsDialog:{type:Boolean,default:false},
  showAddKnowledgePoint:{type:Boolean,default:false},
})
const {showTagsDialog,showAddKnowledgePoint} = toRefs(props)

const emit = defineEmits(['update:showTagsDialog','update:showAddKnowledgePoint','sendTagData','sendKnowledgeData'])
console.log(props,"关联标签弹框的props");

const  knowledgeDialogVisible=computed({
  get:()=>props.showAddKnowledgePoint,
  set:(value)=>emit('update:showAddKnowledgePoint',value)
})//关联知识点
const  addTagDialogVisible=computed({
   get:()=>props.showTagsDialog,
  set:(value)=>emit('update:showTagsDialog',value)
 
})//关联标签

//重名名
const startRename = (row) => {
  row.isEditing = true;
  row.editingName = row.name;
};
//确认重命名
const confirmRename = (row) => {
  if (row.editingName.trim()) {
    row.name = row.editingName;
  }
  row.isEditing = false;
};
//取消重命名
const cancelRename = (row) => {
  row.isEditing = false;
  row.editingName = row.name;
};

/******************关联知识点dialog的操作**************************** */
//  是否同步
const  isSyncQuestion = ref(false);
// 知识点列表
const  knowledgeList = ref([
  { id: 1, name: '数据',isEditing: false,isRename:false,editingName:'',isChecked:false,showActions:false },
  { id: 2, name: 'mybatis',isEditing: false,isRename:false,editingName:'',isChecked:false,showActions:false  },
]);
// 被选中的知识点 
const selectedKnowledges = computed(() => knowledgeList.value.filter(i => i.isChecked));
//  删除知识点
const  deleteKnowledge = (knowledge) => { 
  // todo 调用后端接口删除知识点
  knowledgeList.value = knowledgeList.value.filter(i => i.id !== knowledge.id);
}
// 搜索知识点
const searchKnowledge=ref('')
 // 添加知识点的方法
const addNewKnowledge=()=>{
  console.log("添加知识点")
  const newKnowledge = { id: Date.now(), name: '',isEditing: true,isRename:false,editingName:'',isChecked:false };
  knowledgeList.value.push(newKnowledge);

}
const addKnowledgeToQuestion = () => { 
  console.log("关联知识点弹框的确定按钮")
  emit('sendKnowledgeData',selectedKnowledges.value)
  knowledgeDialogVisible.value = false;
 };


  /******************关联标签dialog的操作**************************** */
// 标签数据 
const  tagList = ref([
  { id: 1, name: 'Java基础',isEditing: false,isRename:false,editingName:'',isChecked:false,showActions:false },
  { id: 2, name: '基础',isEditing: false,isRename:false,editingName:'',isChecked:false,showActions:false  },
]);
// 被选中的标签 
const  selectedTags = computed(() => tagList.value.filter(i => i.isChecked));
//  是否展示编辑和删除 
// 删除标签 
const  deleteTag = (tag) => {
  // todo 调用后端接口删除标签
  tagList.value = tagList.value.filter(i => i.id !== tag.id);
};

 // 新增标签的确定操作
 const addNewTag = () => { 
  console.log("新增标签")
  const newTag = { id: Date.now(), name: '',isEditing: true,isRename:false,editingName:'',isChecked:false };
  tagList.value.push(newTag);
 };


 //  关联标签的确定操作
 const  addTagToQuestion = () => { 
  console.log("添加关联标签")
  emit('sendTagData',selectedTags.value);
  addTagDialogVisible.value = false;
  
 };
</script >
<style lang="less" scoped>
</style>